<template>
  <el-dialog v-if="load" title="操作日志" v-model="visible" align-center width="800px" @close="handleClose">
    <vxe-grid ref="tableRef" v-bind="tableOptions" class="log-table" />
    <template #footer>
      <div class="dialog-button">
        <el-button @click="close">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
// 声明接收参数
const props = defineProps({
  api: { type: Function, default: () => [] },
})
const columns = {
  default: [
    { field: "created_username", title: "操作人", width: 150 },
    { field: "created_at", title: "操作时间", width: 170 },
    { field: "log_info", title: "操作说明", minWidth: 100, type: "html" },
  ],
  type: [
    { field: "created_username", title: "操作人", width: 150 },
    { field: "log_type", title: "操作类型", width: 100 },
    { field: "created_at", title: "操作时间", width: 170 },
    {
      field: "log_info",
      title: "操作说明",
      minWidth: 100,
      // type: "html",
      slots: {
        default: ({ row }) => (
          <el-tooltip content={row.log_info} placement="top" raw-content popper-class="popperClass">
            <div v-html={row.log_info} class="log-info"></div>
          </el-tooltip>
        ),
      },
    },
  ],
}
const load = ref(false)
const visible = ref(false)
const tableRef = ref()
const params = ref({})
const tableOptions = reactive({
  height: 560,
  border: "full",
  pagerConfig: { pageSize: 10 },
  columns: [
    // { field: "created_username", title: "操作人", width: 150 },
    // { field: "created_at", title: "操作时间", width: 170 },
    // // { field: "log_type", title: "操作类型", width: 100 },
    // { field: "log_info", title: "操作说明", minWidth: 100, type: "html" },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: async ({ page }) => {
        let param = {
          ...params.value,
          page: page.currentPage,
          page_size: page.pageSize,
        }
        return props.api(param)
      },
    },
  },
})

const emit = defineEmits(["close"])

// 打开弹窗
const open = async (obj, type = false) => {
  params.value = obj
  if (!type) {
    tableOptions.columns = columns.default
  } else {
    tableOptions.columns = columns.type
  }
  if (!load.value) {
    load.value = true
    await 1
  }
  visible.value = true
  await 1
  tableRef.value.loadColumn(tableOptions.columns)
  tableRef?.value.commitProxy("query")
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit("close")
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.log-info) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
</style>
<style lang="scss">
.popperClass > span:first-child {
  display: inline-block;
  max-height: 500px !important;
  overflow-y: auto;
  max-width: 800px;

  * {
    color: #fff !important;
  }
}
</style>
